<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="filter-container">
          <el-form size="small" label-width="120px" :inline="true">
            <el-form-item label="时间选择：" class="mr10">
              <el-date-picker
                v-model="timeVal"
                type="daterange"
                align="right"
                unlink-panels
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy/MM/dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onchangeTime"
              />
            </el-form-item>
			
			
			
			
			
			<el-form-item label="用户uid：" label-width="80px" style="display: inline-block;">
			  <el-input
			    v-model="tableForm.uid"
			    @keyup.enter.native="getList(1)"
			    placeholder="请输入用户uid"
			    class="selWidth"
			  >
			    <!-- <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" /> -->
			  </el-input>
			</el-form-item>
			
			<el-form-item label="用户uid范围：" label-width="100px" style="display: inline-block;">
			  <el-input
			    v-model="tableForm.uids_in"
			    @keyup.enter.native="getList(1)"
			    placeholder="请输入用户uid范围,用-分隔开"
			    class="selWidth"
			  >
			    <!-- <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" /> -->
			  </el-input>
			</el-form-item>
			
			<el-form-item label="用户昵称：" label-width="80px" style="display: inline-block;">
			  <el-input
			    v-model="tableForm.nickname"
			    @keyup.enter.native="getList(1)"
			    placeholder="请输入用户昵称"
			    class="selWidth"
			  >
			    <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
			  </el-input>
			  
			  <el-button size="small" type="primary" icon="el-icon-top" @click="exportRecord">列表导出</el-button>
			  <el-button size="small" type="primary" @click="getExportFileList">导出记录</el-button>
			  
			</el-form-item>
			
			
			
          </el-form>
		    
		  
		  
		  
		  
		  
		  
        </div>
       <cards-data :card-lists="cardLists" />
	   
	   
	   
        <el-tabs v-if="headeNum.length > 0" v-model="tableForm.type" @tab-click="getList(1)">
            <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.type.toString()" :label="item.title" />
        </el-tabs>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        class="table"
        highlight-current-row
      >
        <el-table-column label="序号" min-width="90">
            <template scope="scope">
                <span>{{ scope.$index+(tableForm.page - 1) * tableForm.limit + 1 }}</span>
            </template>
        </el-table-column>
		
		<el-table-column
		  prop="create_time"
		  label="加入日期"
		  min-width="150"
		/>
		
       <el-table-column
          prop="uid"
          label="用户ID"
          width="80"
        />
		<el-table-column
		   prop="nickname"
		   label="昵称"
		   width="120"
		 />
		 <!-- 新增 -->
	<!-- 	 <el-table-column
		    prop="nickname"
		    label="服务商ID"
		    width="120"
		  /> -->
		  <el-table-column
		     prop="jiaoyi_price"
		     label="交易金额"
		     width="120"
		   />
		   <el-table-column
		      prop="jiaoyi_cost"
		      label="货代金额"
		      width="120"
		    />
			<el-table-column
			   prop="weixin_price"
			   label="微信支付"
			   width="120"
			 />
			 <!-- <el-table-column
			    prop="weixin_price"
			    label="微信支付"
			    width="120"
			  /> -->
			  <el-table-column
			     prop="yue_price"
			     label="余额支付"
			     width="120"
			   />
			   <el-table-column
			      prop="yishou_money_help"
			      label="用户助力已收"
			      width="120"
			    />
				<el-table-column
				   prop="daishou_money_help"
				   label="用户助力待收"
				   width="120"
				 />
				
					<el-table-column
					   prop="yishou_money_rate"
					   label="用户助力手续费"
					   width="120"
					 />
					
				 <el-table-column
				    prop="now_money"
				    label="余额"
				    width="80"
				  />
			   <el-table-column
			      prop="yue_transfer"
			      label="余额转赠"
			      width="120"
			    />
				<el-table-column
				   prop="yue_transfer_add"
				   label="余额转入"
				   width="120"
				 />
				<el-table-column
				   prop="yue_cash"
				   label="余额提现"
				   width="120"
				 />
				 <el-table-column
				    prop="greencoin"
				    label="股分余额"
				    width="80"
				  />
				 <el-table-column
				    prop="greencoin_cash"
				    label="股分提现"
				    width="120"
				  />
					<el-table-column
					   prop="greencoin_transfer"
					   label="股分转赠"
					   width="120"
					 />
					 <!-- <el-table-column
					    prop="greencoin_transfer_add"
					    label="股分转入"
					    width="120"
					  /> -->
				  <el-table-column
				     prop="mer_yishou_money_help"
				     label="商家助力出资"
				     width="120"
				   />
				   
				   <el-table-column
				      prop="mer_daishou_money"
				      label="商家助力已收"
				      width="120"
				    />
					<el-table-column
					   prop="mer_daishou_money_help"
					   label="商家助力待收"
					   width="120"
					 />
					 <el-table-column
					    prop="mer_daishou_rate"
					    label="商家助力手续费"
					    width="120"
					  />
				  
		 <!-- 新增 -->
	
		
		<el-table-column
		   prop="spread_uid"
		   label="直接推荐人ID"
		   width="120"
		 />
		 <el-table-column
		    prop="spread.nickname"
		    label="直接推荐人昵称"
		    width="120"
		  />
		  
		  <el-table-column
		     prop="jian_spread_info.uid"
		     label="间接推荐人ID"
		     width="120"
		   />
		   <el-table-column
		      prop="jian_spread_info.nickname"
		      label="间接推荐人昵称"
		      width="120"
		    />
			
			 <!-- <el-table-column
			     prop="daishou_money_help"
			     label="代收助力"
			     width="80"
			   />
			   <el-table-column
			      prop="yishou_money_help"
			      label="已收助力"
			      width="80"
			    /> -->
		 
		 
	
      

      </el-table>
      <div class="block mb20">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableForm.limit"
          :current-page="tableForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>


<!--导出订单列表-->
    <file-list ref="exportList" />
    
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { billListApiMoneyInfo, financialDetailApi, finaHeaderDataCoinApiJiaru, extractManageExportApiMoneyInfo,extractManageExportApi,extractListApi } from '@/api/accounts'
import { roterPre } from '@/settings'
import cardsData from "@/components/cards/index";
import fileList from '@/components/exportFile/fileList'
export default {
  name: 'Record',
  components: { cardsData,fileList },
  data() {
    return {
      loading: false,
      roterPre: roterPre,
      timeVal: [],
      listLoading: true,
      tableData: {
        data: [],
        total: 0
      },
      tableForm: {
        page: 1,
        limit: 10,
        date: '',
        type: '1',
		is_pay:'',
		keyword:'',
		order_type:'',
		uid:'',
		nickname:'',
		uids_in:'',
      },
      ruleForm: {
        status: '0'
      },
      headeNum: [
          {type: '1',title: "列表"},
          // {type: '0',title: "排队中"},
      ],
      dialogVisible: false,
      rules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      reconciliationId: 0,
      cardLists: [],
      accountDetails: {
        date: '',
        charge: {},
        expend: {},
        income: {}
      }
    }
  },
  computed: {

  },
  mounted() {
    this.getList('')
    this.getHeaderData()
  },
  methods: {
    onDetails(date) {
      financialDetailApi(this.tableForm.type,{date: date}).then(res => {
        this.dialogVisible = true
        this.accountDetails = res.data
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    getHeaderData(){
       finaHeaderDataCoinApiJiaru({date:this.tableForm.date}).then(res => {
           this.cardLists = res.data
       }).catch(res => {
         this.$message.error(res.message)
       })
    },
	
	// 导出
	exportRecord() {
	  extractManageExportApiMoneyInfo(this.tableForm)
	    .then((res) => {
	      const h = this.$createElement;
	      this.$msgbox({
	        title: '提示',
	        message: h('p', null, [
	          h('span', null, '文件正在生成中，请稍后点击"'),
	          h('span', { style: 'color: teal' }, '导出记录'),
	          h('span', null, '"查看~ '),
	        ]),
	        confirmButtonText: '我知道了',
	      }).then(action => {
	
	      });
	    })
	    .catch((res) => {
	      this.$message.error(res.message)
	    })
	},
	// 导出列表
	getExportFileList() {
		// alert('yes'); 
		console.log('this.$refs.exportList',this.$refs.exportList);
	  this.$refs.exportList.exportFileList()
	},
    //下载账单
    downloadAccounts(time){
        downloadFinancialApi(this.tableForm.type,{date: time})
            .then((res) => {
                const h = this.$createElement;
                this.$msgbox({
                    title: '提示',
                    message: h('p', null, [
                      h('span', null, '文件正在生成中，请稍后点击"'),
                      h('span', { style: 'color: teal' }, '导出记录'),
                      h('span', null, '"查看~ '),
                ]),
                confirmButtonText: '我知道了',
                }).then(action => {
                    this.$router.push(`${roterPre}/group/exportList`);
                });
            }).catch((res) => {
                this.$message.error(res.message);
            });

    },
    handleClose() {
      this.dialogVisible = false
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableForm.date = this.timeVal ? this.timeVal.join('-') : ''
      this.getList('')
      this.getHeaderData()
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableForm.page = num ? num : this.tableForm.page;
      billListApiMoneyInfo(this.tableForm).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableForm.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableForm.limit = val
      this.chkName = ''
      this.getList('')
    }
  }
}
</script>

<style lang="scss" scoped>
  .selWidth{
    width: 300px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
  }
  .el-menu-item{
      font-weight: bold;
      color: #333;
  }
  /deep/.el-dialog__header{
      text-align: left;
  }
  .el-col{
      position: relative;
      .el-divider--vertical{
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        margin: 0;
       }
  }
  .grid-content{
      padding: 0 15px;
      display: block;
      .title,.color_red,.color_gray{
        display: block;
        line-height: 20px;
      }
      .color_red{
        color: red;
        font-weight: bold;
      }
      .color_gray{
        color: #333;
        font-weight: bold;
      }
     .count{
         font-size: 12px;
     }
     .list{
         margin-top: 20px;
         .item{
             overflow: hidden;
             margin-bottom: 10px;
         }
         .name,.cost{
             line-height: 20px;
         }
         .cost{
             text-align: right;
             span{
                 display: block;
             }
         }
         .name,.cost_count{
             font-size: 12px;
         }
         .cost_count{
             margin-top: 10px;
         }
         .cost_num{
             font-weight: bold;
             color: #333;
         }
     }

  }

</style>
